{% extends "base.html" %}

{% block navbar %}{% endblock %}
{% block content %}
<style>
body {
    
        margin: -0.4cm auto;
        font-size: 15px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        padding: 15px 0;
        background-image: url("../static/image/s.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }
    #head {
        opacity:0.85;
        width: 1100px;
        padding: 25px 15px 15px 15px;
        margin: 0 auto;
        font-size: 1.4em;
        background: #3f4b4a;
    }

    #title {
        opacity:0.9;
        padding: 0;
        margin: 0;
        font-size: 1.6em;
        color: #FFFFFF;
    }

    #title a:link,
    #title a:visited {
        background: #3f4b4a;
        text-decoration: none;
    }

    #date {
        float: right;
        padding: 10px 10px;
        height: 40px;
        color: #FFFFFF;
        text-align: right;
    }

    #content {
        opacity:0.95;
        width: 1100px;
        padding: 0 15px 1cm 15px;
        margin: 0 auto;
        background: #f5f5f5;
        color: #408080;
    }
    
    #content h1 {
        color: #74A8F5;
        /* font-family: "Trebuchet MS", Arial, Helvetica; */
        padding: 30px 0 0 0;
        margin: 0px 0 15px 0;
        font-size: 1.6em;
    }

    .form_table {
    
        text-align: center;
        margin-bottom: 15px;
        font-size: 1.3em;
    }

    .form_table th {
        opacity:0.9;
        background-color: #74A8F5;
        color: #FFFFFF;
        /*这个就可以将字体设置成白色了，将总体设成白色后再加背景就凸显出字了*/
    }

    .form_table td {
        background-color: #F0F8FF;
        opacity:0.9;
    }

    #footer {
        opacity:0.9;
        width:1100px;
        background: url(img/footer.gif) no-repeat center bottom;
        background: #3f4b4a;
        padding: 0 10px 13px 20px;
        margin: 0 auto;
    }

    #footer #footer_bg {
       
        padding: 15px 15px 15px 15px;
        color: #FFFFFF;  font-size: 1.4em;
    }
</style>

<body>
    {% if error %}
    <script> 
        var successMessage = new bkMessage({
                 message: '{{ error}}',
                 theme: 'error'
             });
     </script>
{% endif %}
{% if sucess %}
    <script> 
       var successMessage = new bkMessage({
                message: '{{ sucess }}',
                theme: 'success'
            });
    </script>
    
{% endif %}




<div id="wrap">
        <div id="head">
            <span id="title">
                <a href="#">用户管理</a>
            </span>
            <span id="date">
                2020/12/15
            </span>
        </div>
        <div id="content">
            <h1>
                <a class="bk-icon-button bk-info"href="{% url 'student:course' %}" title="点击进入">
                    <i class="bk-icon icon-angle-left"></i>
                    <i class="bk-text">课程表</i>
                </a>
             
            </h1>
         
            <form id="i_from1" action="{{ SITE_URL }}select/" method="post" style="margin: 1cm 0 0 0cm;">
                {% csrf_token %}
						<table  cellspacing="7"  > 
							<tr>
								<td><input type="text" name="stu_id" id="shuru" /></td>
                                <td><input type="submit" name="usertype" value="查找" checked />
                                
                                <td> <div class="bk-panel-action"style="margin: 0 0 0 12cm" >
                                        <a href="#mymodaladd" class="bk-button bk-primary" style="font-size: 1em;"data-toggle="modal" data-target="#myModaladd">新增</a>
                                    </div>
                                <td> <a href="#mymodaladd2" class="bk-button bk-primary" style="font-size: 1em;"data-toggle="modal" data-target="#myModaladd2">新增(ajax)</a>
                                    
							</tr>
						</table>
            </form>
            
            <table class="table table-bordered table7_demo">
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>地址</th>
                        <th>院系</th>
                        <th>专业</th>
                        <th>操作</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody>
                    {% for status in statuses %}
                    <tr>
                        			
						         
                        <td>{{ status.stu_id }}</td>
						<td>{{ status.stu_name }}</td>
						<td>{{ status.stu_phone }}</td>
						<td>{{ status.stu_addr }}</td>
						<td>{{ status.stu_faculty }}</td>
                        <td>{{ status.stu_major }}</td>
                        <td>

                            <button class="btn btn-xs btn-warning" data-toggle='modal' data-target='#myModal'onclick=edit("{{ status.stu_id }}") title="编辑">
                                <i class="glyphicon glyphicon-edit"></i>
                            </button>
                            <span class="bk-button bk-primary bk-button-mini" data-toggle='modal' data-target='#myModalemail'onclick=edit("{{ status.stu_id }}")>发送邮件</span>
                        </td>
                        <td colspan="6">
                            <form method="post" action="{{ SITE_URL }}delete/">
                                {% csrf_token %}
                                <input type="hidden" name="stu_id" value={{ status.stu_id }}>
                                <button class="btn btn-xs btn-danger" onclick="return confirm('确认删除？');" title="删除">
                                    <i class="glyphicon glyphicon-remove"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                   
                   
                </tbody>
            </table>


            
             
         
           
        </div>
                          
        <div id="footer">
            <div id="footer_bg">
                wzl@xaut.edu.cn
            </div>
        </div>
  
        <form method="get" action="{{ SITE_URL }}update/" class="form-horizontal" role="formemail" id="myFormemail">
            {% csrf_token %}
            <div class="modal fade" id="myModalemail"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
                <div class="modal-dialog">
                    <!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
                    <div class="modal-content">
                        <!--  显示模态框白色背景，所有内容都写在这个div里面  -->
                        <div class="btn-info modal-header">
                            <!--  模态框标题  -->
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <!--  关闭按钮  -->
                            <h4>发送些什么？</h4>
                            <!--  标题内容  -->
                        </div>
    
                        <div class="modal-body">
                            <!--  模态框内容，我在此处添加一个表单 -->
                            <form class="form-horizontal" role="form" method="post" action="email">
                                <div class="form-group">
                                    <div class="col-sm-9">
                                        <input type="text" name="email"  class="form-control well"  placeholder="请输入"/>
                                    </div>
                                </div>
                                 <div class="modal-footer">
                            <!--  模态框底部样式，一般是提交或者确定按钮 -->
                            <input type="hidden" name="id" id="textemail">                        
                            <button type="submit" class="btn btn-info" >发送</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                            </form>
                        </div>
                    </div><!-- /.modal-content -->
                </div>
            </div> <!-- /.modal -->
        </form>


    <form method="post" action="{{ SITE_URL }}update/" class="form-horizontal" role="form" id="myForm">
        {% csrf_token %}
        <div class="modal fade" id="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
            <div class="modal-dialog">
                <!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
                <div class="modal-content">
                    <!--  显示模态框白色背景，所有内容都写在这个div里面  -->

                    <div class="btn-info modal-header">
                        <!--  模态框标题  -->
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <!--  关闭按钮  -->
                        <h4>您好，请修改(邮件通知)</h4>
                        <!--  标题内容  -->
                    </div>

                    <div class="modal-body">
                        <!--  模态框内容，我在此处添加一个表单 -->
                        <form class="form-horizontal" role="form" method="post" action="Updata">
                            <div class="form-group">
                                <label for="uname" class="col-sm-2 control-label">学号</label>
                                <div class="col-sm-9">
                                    <input type="text" name="stu_id"readonly="readonly" class="form-control well" id="text1" placeholder="请输入学号"/>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="upwd" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-9">
                                    <input type="text" id = "stu_name"name="stu_name" class="form-control well" placeholder="请输入姓名"/>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="upwd" class="col-sm-2 control-label">邮箱</label>
                                <div class="col-sm-9">
                                    <input type="text"id = "stu_phone" name="stu_phone" class="form-control well" placeholder="请输人邮箱"/>
                                </div>
                                <div id="ts"></div>

                            </div>
                            <div class="form-group">
                                <label for="upwd" class="col-sm-2 control-label">学生地址</label>
                                <div class="col-sm-9">
                                    <input type="text"id = "stu_addr" name="stu_addr" class="form-control well" placeholder="请输入地址"/>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="upwd" class="col-sm-2 control-label">学生院系</label>
                                <div class="col-sm-9">
                                    <input type="text" id = "stu_faculty" name="stu_faculty" class="form-control well" placeholder="请输入院系"/>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="upwd" class="col-sm-2 control-label">学生专业</label>
                                <div class="col-sm-9">
                                    <input type="text"id = "stu_major" name="stu_major" class="form-control well" placeholder="请输入专业"/>
                                </div>
                                
                            </div>
                             <div class="modal-footer">
                        <!--  模态框底部样式，一般是提交或者确定按钮 -->
                        <input type="hidden" name="id" id="text1">
                      
                        <button type="submit" class="btn btn-info" onclick="return checkupdate()" >修改并通知</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div>
        </div> <!-- /.modal -->
    </form>
    

    <form method="post" action="{{ SITE_URL }}add/" class="form-horizontal" name="myFormadd" role="form" id="myFormadd">
        {% csrf_token %}
        <div class="modal fade" id="myModaladd"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
            <div class="modal-dialog">
                <!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
                <div class="modal-content">
                    <!--  显示模态框白色背景，所有内容都写在这个div里面  -->

                    <div class="btn-info modal-header">
                        <!--  模态框标题  -->
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <!--  关闭按钮  -->
                        <h4>您好，请增加</h4>
                        <!--  标题内容  -->
                    </div>

                    <div class="modal-body">
                        <!--  模态框内容，我在此处添加一个表单 -->
                        <form class="form_1" name="myFormadd" id="myFormadd" role="form" method="post" action="Updata">
                            <div class="form-group">
                                <label for="uname" class="col-sm-2 control-label">学号</label>
                                <div class="col-sm-9">
                                    <input onKeyUp="value=value.replace(/\D/g,'')" onafterpaste="value=value.replace(/\D/g,'')" type="text"  name="stu_id"id="stu_id1" class="form-control well" id="text1" placeholder="请输入学号（纯数字）"/>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="upwd" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-9">
                                    <input type="text" name="stu_name"id="stu_name1" class="form-control well" placeholder="请输入专业"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="upwd" class="col-sm-2 control-label">邮箱</label>
                                <div class="col-sm-9">
                                    <input type="text"id = "stu_phone1" name="stu_phone" onblur="check1()" class="form-control well" placeholder="请输人邮箱"/>
                                </div>
                                <div id="tss"></div>

                            </div>
                            <div class="form-group">
                                <label for="upwd" class="col-sm-2 control-label">学生地址</label>
                                <div class="col-sm-9">
                                    <input type="text" name="stu_addr"id="stu_addr1" class="form-control well" placeholder="请输入地址"/>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="upwd" class="col-sm-2 control-label">学生院系</label>
                                <div class="col-sm-9">
                                    <input type="text"  name="stu_faculty"id="stu_faculty1" class="form-control well" placeholder="请输入院系"/>
                                </div>
                            </div>
                             <div class="form-group">
                                <label for="upwd" class="col-sm-2 control-label">学生专业</label>
                                <div class="col-sm-9">
                                    <input type="text" name="stu_major"id="stu_major1" class="form-control well" placeholder="请输入专业"/>
                                </div>
                                
                            </div>
                             <div class="modal-footer">
                        <!--  模态框底部样式，一般是提交或者确定按钮 -->
                        <input type="hidden" name="id" id="text1">
                        <button type="submit" class="btn btn-info" onclick="return check()" >确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                        </form>
                   
                    </div>

                  

                </div><!-- /.modal-content -->
            </div>
        </div> <!-- /.modal -->
    </form>


    <div class="modal fade" id="myModaladd2" name="myModaladd2"tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
        data-backdrop="static">
    <div class="modal-dialog" style="width: 680px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">请增加（ajax）</h4>
            </div>
            <form id="myModaladd2" name="myModaladd2">
                <div class="form-group">
                    <label for="uname" class="col-sm-2 control-label">学号</label>
                    <div class="col-sm-9">
                        <input type="text"  name="stu_ida" id="stu_ida" class="form-control well" id="text1" placeholder="请输入用户名"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="upwd" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-9">
                        <input type="text" name="stu_namea" id="stu_namea"  class="form-control well" placeholder="请输入密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="upwd" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-9">
                        <input type="text" name="stu_phonea" id="stu_phonea" onblur="checkajax1()" class="form-control well" placeholder="请输入密码"/>
                        <div id="tsss"></div>
                    </div>
                
                </div>
                <div class="form-group">
                    <label for="upwd" class="col-sm-2 control-label">学生地址</label>
                    <div class="col-sm-9">
                        <input type="text" name="stu_addra" id="stu_addra"  class="form-control well" placeholder="请输入密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="upwd" class="col-sm-2 control-label">学生院系</label>
                    <div class="col-sm-9">
                        <input type="text"  name="stu_facultya" id="stu_facultya"  class="form-control well" placeholder="请输入密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="upwd" class="col-sm-2 control-label">学生专业</label>
                    <div class="col-sm-9">
                        <input type="text" name="stu_majora"  id="stu_majora" class="form-control well" placeholder="请输入密码"/>
                    </div>
                    
                </div>
            </form>

            <div class="modal-footer">
                <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
                <button type="submit" id="saveOrg" onclick="checkajax()" class="bk-button bk-primary">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    </div>

</div>

<script type="text/javascript">
    function edit(id){
        
            $("#text1").val(id)
            $("#textemail").val(id)
        }    

       
        var key=1;
        //新增
    function check() {
              
        if ($("#stu_id1").val() == "") {
            var warningMessage = new bkMessage({
                message: '请输入学号',
                theme: 'warning'
            });
            return false;
      
        } else if ($("#stu_name1").val() == "") {
            var warningMessage = new bkMessage({
                message: '请输入姓名',
                theme: 'warning'
            });

            return false;
        } else if ($("#stu_major1").val()== "") {
            var warningMessage = new bkMessage({
                message: '请输入专业',
                theme: 'warning'
            });

            return false;
        } else if ($("#stu_faculty1").val() == "") {
            var warningMessage = new bkMessage({
                message: '请输入院系',
                theme: 'warning'
            });
            return false;
        } 
        else if ($("#stu_phone1").val() == "") {
            var warningMessage = new bkMessage({
                message: '请输入邮箱',
                theme: 'warning'
            });
            return false;
        }else if(key==0){

        	return false;
        }
        else return true;
    }
    function check1() {
            var a=myFormadd.stu_phone.value; 
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(reg.test(a))
            {
            $("#tss").html("√");
            $("#tss").css("color","green");
            key=1;
		    }else{
                var warningMessage = new bkMessage({
                message: '邮箱格式不正确',
                theme: 'warning'
            });
                $("#tss").html("邮箱格式不正确！");
                $("#tss").css("color","red");
            key =0;
            console.log(key);
		    }
        }
        //新增ajax
    function saveOrg() {
            console.log($("#stu_ida").val())
         
                $.ajax({
                    url: "{{ SITE_URL }}add/",
                    method: 'POST',
                    data: {
                        'posttype':"ajax",
                        'stu_name': $("#stu_namea").val(),
                        'stu_id': $('#stu_ida').val(),
                        'stu_addr': $('#stu_addra').val(),
                        'stu_phone': $('#stu_phonea').val(),
                        'stu_major': $('#stu_majora').val(),
                        'stu_faculty': $('#stu_facultya').val(),
                        'csrfmiddlewaretoken': "{{ csrf_token }}"
                    },
                    dataType: 'JSON',
                    success: function (response) {
                        console.log(66)
                      
                        if (response['result']) {
                            location.reload()
                            $('#myModaladd2').modal('hide')
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            
                             //orgTable.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                            
                            //$('#myModaladd2').modal('hide')
                            // orgTable.ajax.reload(null, false)
                        }
                    }
                })
            }

    function checkajax() {
              
              if ($("#stu_ida").val() == "") {
                var warningMessage = new bkMessage({
                message: '请输入学号',
                theme: 'warning'
            });
                  return false;
            
              } else if ($("#stu_namea").val() == "") {
                var warningMessage = new bkMessage({
                message: '请输入姓名',
                theme: 'warning'
            });
      
                  return false;
              } else if ($("#stu_majora").val()== "") {
                var warningMessage = new bkMessage({
                message: '请输入专业',
                theme: 'warning'
            });
      
                  return false;
              } else if ($("#stu_facultya").val() == "") {
                var warningMessage = new bkMessage({
                message: '请输入院系',
                theme: 'warning'
            });
                  return false;
              } 
              else if ($("#stu_phonea").val() == "") {
                var warningMessage = new bkMessage({
                message: '请输入邮箱',
                theme: 'warning'
            });
                  return false;
              }else if(key==0){
      
                  return false;
              }
              else saveOrg();
          }
              function checkajax1() {
                var a=$("#stu_phonea").val(); 
                  console.log(a)
                  var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                  if(reg.test(a))
                  {
                  $("#tsss").html("√");
                  $("#tsss").css("color","green");
                  key=1;
                  }else{
                    var warningMessage = new bkMessage({
                message: '邮箱格式不正确',
                theme: 'warning'
            });
                      $("#tsss").html("邮箱格式不正确！");
                      $("#tsss").css("color","red");
                  key =0;
                  console.log(key);
                  }
              }

    //修改

    $("#stu_phone").blur(function(){
    	
        console.log($("#stu_phone").val())
    	var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
		if(reg.test($("#stu_phone").val())){
            $("#ts").html("√");
            $("#ts").css("color","green");
            key=1;
		}else{
            $("#ts").html("邮箱格式不正确！");
            key =0;
            $("#ts").css("color","red");
		}
            });
   
    function checkupdate() {
         if ($("#stu_name").val() == "") {
            alert("请输入姓名!");

            return false;
        } else if ($("#stu_major").val()== "") {
            alert("请输入专业");

            return false;
        } else if ($("#stu_faculty").val() == "") {
            alert("请输入院系!");
            return false;
        } 
        else if ($("#stu_phone").val() == "") {
            alert("请输入邮箱!");
            return false;
        }else if(key==0){

        	return false;
        }
        else return true;

        } 
    </script>
<!-- <a href="/student/login/">登录</a><br> -->

</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
{% endblock %}